<template>
  <div class="hello">
    <h1>{{ msg }}</h1>  
		<stlo>
			 <span slot="xiao1">999</span>    
        <span slot="xiao2">888</span>    
        <span slot="xiao3">777</span>
				<span slot="xiao5">
					<div>
						<p>
							666<br>
							vue插槽在<br>
							组件标签里面添加slot属性<br>
						  在组建初始化添加 
							<pre> '<'slot name="xiao3">你好33'<'/slot'>' </pre>
							有就显示slot传过来的html<br>
							没有就显示name的默认值
						</p>
					</div>
				</span>
			<!-- <div>000999</div> -->
		</stlo>
  </div>
</template>

<script>
import stlo from '@/components/stlo'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
	components: {
		stlo
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
